<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化工具</title>
    <script src="../css/tailwind3.4.17.css"></script>
    <link href="../css/all.min.css" rel="stylesheet">
    <script src="../js/chart.umd.min.js"></script>
    <script src="../js/xlsx.full.min.js"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .progress-bar {
                transition: width 0.5s ease;
            }
            .export-btn {
                @apply flex items-center justify-center p-3 rounded-lg text-white shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <section id="upload" class="mb-12">
            <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fa-solid fa-cloud-upload text-primary mr-2"></i> 选择数据
                </h2>
                
                <div id="drop-area" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-colors duration-200 cursor-pointer mb-6">
                    <input type="file" id="file-input" class="hidden" accept=".xlsx,.xls,.csv">
                    <i class="fa-solid fa-file-excel text-5xl text-gray-400 mb-4"></i>
                    <p class="text-gray-500 mb-2">拖放文件到此处，或</p>
                    <button id="browse-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-200 shadow-sm">
                        <i class="fa-solid fa-folder-open mr-1"></i> 浏览文件
                    </button>
                    <p class="text-gray-400 text-sm mt-4">支持 .xlsx, .xls, .csv 格式</p>
                </div>
                
                <div id="upload-progress" class="hidden mb-4">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-sm text-gray-600">选择进度</span>
                        <span id="progress-percentage" class="text-sm font-medium text-primary">0%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="progress-bar" class="bg-primary h-2 rounded-full progress-bar" style="width: 0%"></div>
                    </div>
                </div>
                
                <div id="file-info" class="hidden mb-6">
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <i class="fa-solid fa-file-excel text-primary mr-3 text-xl"></i>
                            <div>
                                <p id="file-name" class="font-medium text-gray-900 truncate max-w-xs"></p>
                                <p id="file-size" class="text-sm text-gray-500"></p>
                            </div>
                        </div>
                        <button id="remove-file" class="text-gray-400 hover:text-red-500 transition-colors duration-200">
                            <i class="fa-solid fa-times-circle"></i>
                        </button>
                    </div>
                </div>
                
                <div id="data-preview" class="hidden mt-6">
                    <h3 class="text-lg font-medium mb-3">数据预览</h3>
                    <div class="overflow-x-auto bg-gray-50 rounded-lg">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead id="table-header" class="bg-gray-100"></thead>
                            <tbody id="table-body" class="bg-white divide-y divide-gray-200"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <section id="visualize" class="mb-12">
            <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fa-solid fa-chart-pie text-primary mr-2"></i> 可视化设置
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="font-medium mb-3">图表类型</h3>
                        <div class="space-y-2" id="chart-types">
                            <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer transition-colors duration-200 chart-type-option" data-type="bar">
                                <i class="fa-solid fa-chart-bar text-primary mr-2"></i>
                                <span>柱状图</span>
                            </div>
                            <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer transition-colors duration-200 chart-type-option" data-type="line">
                                <i class="fa-solid fa-chart-line text-primary mr-2"></i>
                                <span>折线图</span>
                            </div>
                            <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer transition-colors duration-200 chart-type-option" data-type="pie">
                                <i class="fa-solid fa-chart-pie text-primary mr-2"></i>
                                <span>饼图</span>
                            </div>
                            <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer transition-colors duration-200 chart-type-option" data-type="doughnut">
                                <i class="fa-solid fa-doughnut text-primary mr-2"></i>
                                <span>环形图</span>
                            </div>
                            <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer transition-colors duration-200 chart-type-option" data-type="radar">
                                <i class="fa-solid fa-radar text-primary mr-2"></i>
                                <span>雷达图</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="font-medium mb-3">数据列</h3>
                        <div id="column-selectors" class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">X轴/类别</label>
                                <select id="x-axis-select" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200">
                                    <option value="">请选择...</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Y轴/数值</label>
                                <select id="y-axis-select" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200">
                                    <option value="">请选择...</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="font-medium mb-3">图表选项</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">图表标题</label>
                                <input type="text" id="chart-title" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200" placeholder="请输入图表标题">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">颜色主题</label>
                                <div class="grid grid-cols-3 gap-2">
                                    <button class="theme-btn h-8 rounded-md bg-blue-500" data-theme="blue"></button>
                                    <button class="theme-btn h-8 rounded-md bg-green-500" data-theme="green"></button>
                                    <button class="theme-btn h-8 rounded-md bg-purple-500" data-theme="purple"></button>
                                    <button class="theme-btn h-8 rounded-md bg-red-500" data-theme="red"></button>
                                    <button class="theme-btn h-8 rounded-md bg-yellow-500" data-theme="yellow"></button>
                                    <button class="theme-btn h-8 rounded-md bg-gray-500" data-theme="gray"></button>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="show-legend" class="h-4 w-4 text-primary focus:ring-primary/50 border-gray-300 rounded">
                                <label for="show-legend" class="ml-2 block text-sm text-gray-700">显示图例</label>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="show-grid" class="h-4 w-4 text-primary focus:ring-primary/50 border-gray-300 rounded">
                                <label for="show-grid" class="ml-2 block text-sm text-gray-700">显示网格线</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-12">
            <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fa-solid fa-chart-area text-primary mr-2"></i> 图表展示
                </h2>
                
                <div id="chart-container" class="hidden relative h-96">
                    <canvas id="chart-canvas"></canvas>
                </div>
                
                <div id="no-chart-message" class="h-96 flex items-center justify-center text-gray-400">
                    <div class="text-center">
                        <i class="fa-solid fa-chart-line text-5xl mb-4"></i>
                        <p>选择数据并生成图表后将在此处显示</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="settings" class="mb-8">
            <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fa-solid fa-download text-primary mr-2"></i> 导出设置
                </h2>
                
                <div class="md:grid-cols-2 gap-6">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="font-medium mb-3">导出选项</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">文件名</label>
                                <input type="text" id="export-filename" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200" value="data-visualization">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">图片尺寸</label>
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        <label class="text-xs text-gray-500">宽度 (px)</label>
                                        <input type="number" id="export-width" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200" value="800">
                                    </div>
                                    <div>
                                        <label class="text-xs text-gray-500">高度 (px)</label>
                                        <input type="number" id="export-height" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200" value="600">
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">背景</label>
                                <div class="flex items-center">
                                    <input type="radio" id="bg-transparent" name="background" class="h-4 w-4 text-primary focus:ring-primary/50 border-gray-300" checked>
                                    <label for="bg-transparent" class="ml-2 block text-sm text-gray-700">透明</label>
                                </div>
                                <div class="flex items-center mt-1">
                                    <input type="radio" id="bg-white" name="background" class="h-4 w-4 text-primary focus:ring-primary/50 border-gray-300">
                                    <label for="bg-white" class="ml-2 block text-sm text-gray-700">白色</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div class="fixed right-4 top-1/2 transform -translate-y-1/2 z-40 flex flex-col gap-3">
        <button id="generate-chart" class="export-btn bg-primary">
            <i class="fa-solid fa-refresh mr-2"></i> 生成图表
        </button>
        <button id="export-image" class="export-btn bg-primary" title="导出图片">
            <i class="fa-solid fa-file-image mr-2"></i>
            <span class="hidden sm:inline">导出图片</span>
        </button>
    </div>

    <div id="notification" class="fixed top-4 right-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full opacity-0 z-50 flex items-center">
        <i id="notification-icon" class="mr-2"></i>
        <span id="notification-message"></span>
        <button class="ml-4 text-gray-400 hover:text-gray-600" id="close-notification">
            <i class="fa-solid fa-times"></i>
        </button>
    </div>

    <script>
        let data = null;
        let chart = null;
        let selectedTheme = 'blue';
        
        const dropArea = document.getElementById('drop-area');
        const fileInput = document.getElementById('file-input');
        const browseBtn = document.getElementById('browse-btn');
        const uploadProgress = document.getElementById('upload-progress');
        const progressBar = document.getElementById('progress-bar');
        const progressPercentage = document.getElementById('progress-percentage');
        const fileInfo = document.getElementById('file-info');
        const fileName = document.getElementById('file-name');
        const fileSize = document.getElementById('file-size');
        const removeFile = document.getElementById('remove-file');
        const dataPreview = document.getElementById('data-preview');
        const tableHeader = document.getElementById('table-header');
        const tableBody = document.getElementById('table-body');
        const xAxisSelect = document.getElementById('x-axis-select');
        const yAxisSelect = document.getElementById('y-axis-select');
        const chartTitle = document.getElementById('chart-title');
        const showLegend = document.getElementById('show-legend');
        const showGrid = document.getElementById('show-grid');
        const generateChart = document.getElementById('generate-chart');
        const chartContainer = document.getElementById('chart-container');
        const chartCanvas = document.getElementById('chart-canvas');
        const noChartMessage = document.getElementById('no-chart-message');
        const exportFilename = document.getElementById('export-filename');
        const exportWidth = document.getElementById('export-width');
        const exportHeight = document.getElementById('export-height');
        const bgTransparent = document.getElementById('bg-transparent');
        const bgWhite = document.getElementById('bg-white');
        const notification = document.getElementById('notification');
        const notificationMessage = document.getElementById('notification-message');
        const notificationIcon = document.getElementById('notification-icon');
        const closeNotification = document.getElementById('close-notification');
        const exportImageBtn = document.getElementById('export-image');
        
        browseBtn.addEventListener('click', () => {
            fileInput.click();
        });
        
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFile(e.target.files[0]);
            }
        });
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            dropArea.classList.add('border-primary', 'bg-primary/5');
        }
        
        function unhighlight() {
            dropArea.classList.remove('border-primary', 'bg-primary/5');
        }
        
        dropArea.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const file = dt.files[0];
            if (file) {
                handleFile(file);
            }
        }
        
        function handleFile(file) {
            uploadProgress.classList.remove('hidden');
            simulateProgress();
            
            const fileTypes = [
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'application/vnd.ms-excel',
                'text/csv'
            ];
            
            if (!fileTypes.includes(file.type) && 
                !file.name.endsWith('.xlsx') && 
                !file.name.endsWith('.xls') && 
                !file.name.endsWith('.csv')) {
                showNotification('错误', '请选择Excel或CSV文件', 'error');
                uploadProgress.classList.add('hidden');
                return;
            }
            
            const reader = new FileReader();
            
            reader.onload = function(e) {
                try {
                    if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
                        const workbook = XLSX.read(e.target.result, { type: 'binary' });
                        const firstSheetName = workbook.SheetNames[0];
                        const worksheet = workbook.Sheets[firstSheetName];
                        data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                    } else if (file.name.endsWith('.csv')) {
                        const text = e.target.result;
                        const lines = text.split('\n');
                        data = lines.map(line => line.split(','));
                    }
                    
                    if (!data || data.length <= 1) {
                        showNotification('错误', '文件中没有足够的数据', 'error');
                        uploadProgress.classList.add('hidden');
                        return;
                    }
                    
                    fileName.textContent = file.name;
                    fileSize.textContent = formatFileSize(file.size);
                    
                    fileInfo.classList.remove('hidden');
                    dataPreview.classList.remove('hidden');
                    
                    populateTablePreview();
                    
                    populateColumnSelectors();
                    
                    uploadProgress.classList.add('hidden');
                    
                    showNotification('成功', '文件选择成功', 'success');
                } catch (error) {
                    console.error('Error processing file:', error);
                    showNotification('错误', '处理文件时出错', 'error');
                    uploadProgress.classList.add('hidden');
                }
            };
            
            reader.onerror = function() {
                showNotification('错误', '读取文件时出错', 'error');
                uploadProgress.classList.add('hidden');
            };
            
            if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
                reader.readAsBinaryString(file);
            } else {
                reader.readAsText(file);
            }
        }
        
        function simulateProgress() {
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress > 100) {
                    progress = 100;
                    clearInterval(interval);
                }
                
                progressBar.style.width = `${progress}%`;
                progressPercentage.textContent = `${Math.round(progress)}%`;
            }, 200);
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        function populateTablePreview() {
            tableHeader.innerHTML = '';
            tableBody.innerHTML = '';
            
            const headerRow = document.createElement('tr');
            data[0].forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                th.className = 'px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
                headerRow.appendChild(th);
            });
            tableHeader.appendChild(headerRow);
            
            const rowsToDisplay = Math.min(data.length - 1, 10);
            for (let i = 1; i <= rowsToDisplay; i++) {
                const row = document.createElement('tr');
                row.className = i % 2 === 0 ? 'bg-gray-50' : 'bg-white';
                
                data[i].forEach((cell) => {
                    const td = document.createElement('td');
                    td.textContent = cell;
                    td.className = 'px-4 py-3 whitespace-nowrap text-sm text-gray-500';
                    row.appendChild(td);
                });
                
                tableBody.appendChild(row);
            }
            
            if (data.length > 11) {
                const moreRow = document.createElement('tr');
                const moreTd = document.createElement('td');
                moreTd.colSpan = data[0].length;
                moreTd.className = 'px-4 py-3 text-center text-sm text-gray-400';
                moreTd.textContent = `... 和 ${data.length - 10} 更多行`;
                moreRow.appendChild(moreTd);
                tableBody.appendChild(moreRow);
            }
        }
        
        function populateColumnSelectors() {
            xAxisSelect.innerHTML = '<option value="">请选择...</option>';
            yAxisSelect.innerHTML = '<option value="">请选择...</option>';
            
            data[0].forEach((column, index) => {
                const xOption = document.createElement('option');
                xOption.value = index;
                xOption.textContent = column;
                xAxisSelect.appendChild(xOption);
                
                const yOption = document.createElement('option');
                yOption.value = index;
                yOption.textContent = column;
                yAxisSelect.appendChild(yOption);
            });
        }
        
        removeFile.addEventListener('click', () => {
            fileInput.value = '';
            data = null;
            fileInfo.classList.add('hidden');
            dataPreview.classList.add('hidden');
            xAxisSelect.innerHTML = '<option value="">请选择...</option>';
            yAxisSelect.innerHTML = '<option value="">请选择...</option>';
            
            if (chart) {
                chart.destroy();
                chart = null;
                chartContainer.classList.add('hidden');
                noChartMessage.classList.remove('hidden');
            }
            
            showNotification('信息', '文件已移除', 'info');
        });
        
        document.querySelectorAll('.chart-type-option').forEach(option => {
            option.addEventListener('click', () => {
                document.querySelectorAll('.chart-type-option').forEach(opt => {
                    opt.classList.remove('bg-primary/10', 'text-primary');
                });
                
                option.classList.add('bg-primary/10', 'text-primary');
            });
        });
        
        document.querySelectorAll('.theme-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.theme-btn').forEach(b => {
                    b.classList.remove('ring-2', 'ring-offset-2');
                });
                
                btn.classList.add('ring-2', 'ring-offset-2', 'ring-primary');
                
                selectedTheme = btn.dataset.theme;
            });
        });
        
        generateChart.addEventListener('click', () => {
            if (!data) {
                showNotification('错误', '请先选择数据文件', 'error');
                return;
            }
            
            const xAxisIndex = parseInt(xAxisSelect.value);
            const yAxisIndex = parseInt(yAxisSelect.value);
            
            if (isNaN(xAxisIndex) || isNaN(yAxisIndex)) {
                showNotification('错误', '请选择X轴和Y轴数据列', 'error');
                return;
            }
            
            if (xAxisIndex === yAxisIndex) {
                showNotification('错误', 'X轴和Y轴不能选择同一列', 'error');
                return;
            }
            
            const labels = [];
            const values = [];
            
            for (let i = 1; i < data.length; i++) {
                if (!data[i][xAxisIndex] || !data[i][yAxisIndex]) continue;
                
                labels.push(data[i][xAxisIndex]);
                
                const value = parseFloat(data[i][yAxisIndex]);
                values.push(isNaN(value) ? data[i][yAxisIndex] : value);
            }
            
            if (labels.length === 0 || values.length === 0) {
                showNotification('错误', '所选列中没有有效数据', 'error');
                return;
            }
            
            let chartType = 'bar';
            const selectedChartType = document.querySelector('.chart-type-option.bg-primary\\/10');
            if (selectedChartType) {
                chartType = selectedChartType.dataset.type;
            }
            
            const config = {
                type: chartType,
                data: {
                    labels: labels,
                    datasets: [{
                        label: chartTitle.value || data[0][yAxisIndex],
                        data: values,
                        backgroundColor: getThemeColors(labels.length),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: showLegend.checked,
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: chartTitle.value || `${data[0][yAxisIndex]} 图表`,
                            font: {
                                size: 16,
                                weight: 'bold'
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#1D2129',
                            bodyColor: '#4E5969',
                            borderColor: '#E5E6EB',
                            borderWidth: 1,
                            padding: 12,
                            boxPadding: 6,
                            usePointStyle: true,
                            callbacks: {
                                label: function(context) {
                                    return `${data[0][yAxisIndex]}: ${context.raw}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: showGrid.checked,
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                color: '#4E5969'
                            }
                        },
                        y: {
                            grid: {
                                display: showGrid.checked,
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                color: '#4E5969',
                                callback: function(value) {
                                    if (value >= 1000 && value < 1000000) {
                                        return (value / 1000).toFixed(1) + 'k';
                                    } else if (value >= 1000000) {
                                        return (value / 1000000).toFixed(1) + 'M';
                                    }
                                    return value;
                                }
                            }
                        }
                    },
                    animations: {
                        tension: {
                            duration: 1000,
                            easing: 'linear'
                        }
                    }
                }
            };
            
            if (chartType === 'pie' || chartType === 'doughnut') {
                delete config.options.scales;
                config.options.cutout = chartType === 'doughnut' ? '65%' : '0%';
            }
            
            if (chart) {
                chart.destroy();
            }
            
            chart = new Chart(chartCanvas, config);
            
            chartContainer.classList.remove('hidden');
            noChartMessage.classList.add('hidden');
            
            showNotification('成功', '图表生成成功', 'success');
        });
        
        function getThemeColors(count) {
            const themes = {
                blue: [
                    'rgba(22, 93, 255, 0.8)',
                    'rgba(22, 93, 255, 0.6)',
                    'rgba(22, 93, 255, 0.4)',
                    'rgba(22, 93, 255, 0.3)',
                    'rgba(22, 93, 255, 0.2)',
                    'rgba(22, 93, 255, 0.1)'
                ],
                green: [
                    'rgba(0, 191, 165, 0.8)',
                    'rgba(0, 191, 165, 0.6)',
                    'rgba(0, 191, 165, 0.4)',
                    'rgba(0, 191, 165, 0.3)',
                    'rgba(0, 191, 165, 0.2)',
                    'rgba(0, 191, 165, 0.1)'
                ],
                purple: [
                    'rgba(156, 39, 176, 0.8)',
                    'rgba(156, 39, 176, 0.6)',
                    'rgba(156, 39, 176, 0.4)',
                    'rgba(156, 39, 176, 0.3)',
                    'rgba(156, 39, 176, 0.2)',
                    'rgba(156, 39, 176, 0.1)'
                ],
                red: [
                    'rgba(255, 82, 82, 0.8)',
                    'rgba(255, 82, 82, 0.6)',
                    'rgba(255, 82, 82, 0.4)',
                    'rgba(255, 82, 82, 0.3)',
                    'rgba(255, 82, 82, 0.2)',
                    'rgba(255, 82, 82, 0.1)'
                ],
                yellow: [
                    'rgba(255, 193, 7, 0.8)',
                    'rgba(255, 193, 7, 0.6)',
                    'rgba(255, 193, 7, 0.4)',
                    'rgba(255, 193, 7, 0.3)',
                    'rgba(255, 193, 7, 0.2)',
                    'rgba(255, 193, 7, 0.1)'
                ],
                gray: [
                    'rgba(108, 117, 125, 0.8)',
                    'rgba(108, 117, 125, 0.6)',
                    'rgba(108, 117, 125, 0.4)',
                    'rgba(108, 117, 125, 0.3)',
                    'rgba(108, 117, 125, 0.2)',
                    'rgba(108, 117, 125, 0.1)'
                ]
            };
            
            const colors = themes[selectedTheme];
            const result = [];
            
            for (let i = 0; i < count; i++) {
                result.push(colors[i % colors.length]);
            }
            
            return result;
        }
        
        function exportChart(format) {
            if (!chart) {
                showNotification('错误', '请先生成图表', 'error');
                return;
            }
            
            const filename = exportFilename.value || 'chart';
            const width = parseInt(exportWidth.value) || 800;
            const height = parseInt(exportHeight.value) || 600;
            const useWhiteBackground = bgWhite.checked;
            
            const tempCanvas = document.createElement('canvas');
            tempCanvas.width = width;
            tempCanvas.height = height;
            const tempCtx = tempCanvas.getContext('2d');
            
            if (useWhiteBackground) {
                tempCtx.fillStyle = 'white';
                tempCtx.fillRect(0, 0, width, height);
            }
            
            tempCtx.drawImage(chart.canvas, 0, 0, width, height);
            
            try {
                if (format === 'image') {
                    download(tempCanvas.toDataURL('image/png'), `${filename}.png`, 'image/png');
                    showNotification('成功', `图表已导出为 PNG 图片`, 'success');
                }
            } catch (error) {
                console.error('导出图表时出错:', error);
                showNotification('错误', '导出图表时出错', 'error');
            }
        }
        
        exportImageBtn.addEventListener('click', () => exportChart('image'));
        
        function download(dataUrl, filename, mimeType) {
            const link = document.createElement('a');
            link.href = dataUrl;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        
        function showNotification(title, message, type) {
            notificationMessage.textContent = `${title}: ${message}`;
            
            if (type === 'success') {
                notification.className = 'fixed top-4 right-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 translate-x-0 opacity-100 z-50 flex items-center bg-green-50 text-green-800 border-l-4 border-green-400';
                notificationIcon.className = 'fa-solid fa-check-circle text-green-500 mr-2';
            } else if (type === 'error') {
                notification.className = 'fixed top-4 right-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 translate-x-0 opacity-100 z-50 flex items-center bg-red-50 text-red-800 border-l-4 border-red-400';
                notificationIcon.className = 'fa-solid fa-exclamation-circle text-red-500 mr-2';
            } else if (type === 'info') {
                notification.className = 'fixed top-4 right-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 translate-x-0 opacity-100 z-50 flex items-center bg-blue-50 text-blue-800 border-l-4 border-blue-400';
                notificationIcon.className = 'fa-solid fa-info-circle text-blue-500 mr-2';
            }
            
            notification.style.transform = 'translateX(0)';
            notification.style.opacity = '1';
            
            setTimeout(() => {
                hideNotification();
            }, 3000);
        }
        
        function hideNotification() {
            notification.style.transform = 'translateX(calc(100% + 1rem))';
            notification.style.opacity = '0';
        }
        
        closeNotification.addEventListener('click', hideNotification);
        
        document.querySelector('.chart-type-option').classList.add('bg-primary/10', 'text-primary');
        
        document.querySelector('.theme-btn').classList.add('ring-2', 'ring-offset-2', 'ring-primary');
        
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 20,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>